<template>
	<view>
		<view class="form">
			<form @submit="formSubmit">
				<view class="uni-title">申请权限</view>
				<picker @change="bindPickerChange" :value="index" :range="array" name="role">
					<view class="uni-input icon-cheveron-down">{{array[index]}}</view>
				</picker>

				<view class="uni-title">申请原因</view>
				<view class="uni-textarea">
					<textarea placeholder-style="color:#999" placeholder="在此填写" name="apply_cause" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">提交</button>
				</view>
			</form>
		</view>

		<view class="uni-title" style="margin-left: 50rpx;">申请状态</view>
		<view class="status0" v-if="isstatus0show">
			<view class="apply w">
				<view class="title">
					申请提交
				</view>
				<text class="icon-radio-unchecked w1"></text>
			</view>

			<view class="rowline"></view>

			<view class="audit w">
				<view class="title">
					申请审核
				</view>
				<text class="icon-radio-unchecked w1"></text>
			</view>

			<view class="rowline"></view>

			<view class="finish w">
				<view class="title">
					审核完毕
				</view>
				<text class="icon-radio-unchecked w1"></text>
			</view>
		</view>
		<view class="status1" v-if="isstatus1show">
			<view class="apply w">
				<view class="title">
					申请提交
				</view>
				<text class="icon-checkmark-outline w1"></text>
			</view>

			<view class="rowline"></view>

			<view class="audit w">
				<view class="title">
					申请审核
				</view>
				<text class="icon-radio-unchecked w1"></text>
			</view>

			<view class="rowline"></view>

			<view class="finish w">
				<view class="title">
					审核完毕
				</view>
				<text class="icon-radio-unchecked w1"></text>
			</view>
		</view>
		<view class="status2" v-if="isstatus2show">
			<view class="apply w">
				<view class="title">
					申请提交
				</view>
				<text class="icon-checkmark-outline w1"></text>
			</view>

			<view class="rowline"></view>

			<view class="audit w">
				<view class="title">
					申请审核
				</view>
				<text class="icon-checkmark-outline w1"></text>
			</view>

			<view class="rowline"></view>

			<view class="finish w">
				<view class="title">
					审核完毕
				</view>
				<text class="icon-checkmark-outline w1"></text>
			</view>
		</view>

		<view class="uni-title" style="margin-left: 50rpx;margin-top: 50rpx;">最近一次已提交申请</view>
		<view class="roleApplyInfo">
			<view class="wu" v-if="isstatus0show" >
				没有任何申请
			</view>
			
			<view class="you" v-if="hasapply">
				<view class="title">
					申请状态：{{ status }}
				</view>
				<view class="apply-time">
					<text>提交时间：</text>
					<text>{{ info.apply_date | dateFormat }}</text>
				</view>
				<view class="audit-time" v-if="isstatus2show">
					<text>审核时间：</text>
					<text>{{ info.check_date | dateFormat }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		addRoleApply
	} from '../../api/roleapply.js'
	import {
		getRoleApply
	} from '../../api/roleapply.js'
	export default {
		data() {
			return {
				array: ['请选择', '超级管理员', '教师用户', '学生用户'],
				index: 0,
				roleApplyList: [],
				info: {
					apply_type: 0
				}
			}
		},
		onLoad() {
			this.getRoleApplyList()
		},
		computed: {
			isstatus0show() {
				return this.roleApplyList.length === 0 ? true : false
			},
			hasapply(){
				return this.roleApplyList.length !== 0 ? true : false
			},
			isstatus1show() {
				if (this.roleApplyList.length !== 0) {
					if (this.info.apply_type == 1) return true
					return false
				}
				return false
			},
			isstatus2show() {
				if (this.roleApplyList.length !== 0) {
					if (this.info.apply_type == 2 || this.info.apply_type == 3) return true
					return false
				}
				return false
			},
			status() {
				if (this.info.apply_type == 1) return '待审核'
				if (this.info.apply_type == 2) return '通过'
				if (this.info.apply_type == 3) return '驳回'
			}
		},
		methods: {
			formSubmit: function(e) {
				var formdata = e.detail.value
				if (formdata.role === 0) {
					return uni.showToast({
						title: '请选择申请权限',
						icon: 'error'
					})
				}
				if (formdata.apply_cause === '') {
					return uni.showToast({
						title: '请填写申请理由',
						icon: 'error'
					})
				}
				uni.showModal({
					title: '提示',
					content: '即将提交信息',
					success: async res => {
						if (res.confirm) {
							const response = await addRoleApply(formdata)
							console.log(response.data)
							if (response.statusCode === 802) {
								uni.showToast({
									title: '有未审核的申请',
									icon: 'error'
								})
							}
							if (response.statusCode === 200) {
								uni.showToast({
									title: '提交成功'
								})
								this.getRoleApplyList()
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			async getRoleApplyList() {
				const {
					data: res
				} = await getRoleApply()
				// 如果是学生教师只能获取自己的申请列表 roleApplyList
				if(this.$store.state.userInfo.role === 2 || this.$store.state.userInfo.role === 3){
					this.roleApplyList = res.data.roleApplyList
					if(res.data.roleApplyList.length !== 0){
						this.info = res.data.roleApplyList[0]
					}
				}
				// 如果是超管获取到的是所有学生的applyList
				if(this.$store.state.userInfo.role === 1){
					this.roleApplyList = res.data.applyList.filter( item => item.user_id === this.$store.state.userInfo.id )
					if(this.roleApplyList.length !== 0){
						this.info = res.data.applyList.find( item => item.user_id === this.$store.state.userInfo.id)
					}
				}
			}
		},
		filters: {
			dateFormat(time) {
				var date = new Date(time)
				var y = date.getFullYear()
				var m = padZero(date.getMonth() + 1)
				var d = padZero(date.getDate())
				var h = padZero(date.getHours())
				var mm = padZero(date.getMinutes())
				var s = padZero(date.getSeconds())
				return y + '年' + m + '月' + d + '日  ' + h + ':' + m + ':' + s
			}
		}
	}

	function padZero(n) {
		return n > 9 ? n : '0' + n
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.form {
		padding-left: 45rpx;
		margin-bottom: 50rpx;

		.uni-input {
			position: relative;
			width: 300rpx;
			height: 50rpx;
			margin-bottom: 15rpx;
			padding-left: 30rpx;
			background-color: #fff;
			border-bottom: 1px solid #ccc;

			&::before {
				position: absolute;
				right: 20rpx;
				font-size: 36rpx;
			}
		}

		textarea {
			width: 650rpx;
			height: 180rpx;
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 15rpx;
			background-color: #fff;
			box-shadow: 0 0 4px rgba(150, 150, 150, .3);
		}

		.uni-title {
			margin-bottom: 15rpx;
		}

		.uni-btn-v {
			position: absolute;
			left: 250rpx;
			bottom: 80rpx;

			button {
				width: 270rpx;
				height: 70rpx;
				line-height: 70rpx;
			}
		}
	}

	.status0 {
		display: flex;
		justify-content: space-between;
		margin: 50rpx 50rpx 0 50rpx;

		.rowline {
			margin-top: 25rpx;
			width: 100rpx;
			height: 2rpx;
			background-color: #ccc;
		}

		.w {
			color: #999;

			.w1 {
				display: block;
				margin: 15rpx 0 0 50rpx;
			}
		}
	}

	.status1 {
		display: flex;
		justify-content: space-between;
		margin: 50rpx 50rpx 0 50rpx;

		.rowline {
			margin-top: 25rpx;
			width: 100rpx;
			height: 2rpx;
			background-color: #ccc;
		}

		.w {
			color: #999;

			.w1 {
				display: block;
				margin: 15rpx 0 0 50rpx;
			}
		}

		.apply {
			color: #55a7ea;
		}

		.audit {
			color: #2fbb9c;
		}
	}

	.status2 {
		display: flex;
		justify-content: space-between;
		margin: 50rpx 50rpx 0 50rpx;

		.rowline {
			margin-top: 25rpx;
			width: 100rpx;
			height: 2rpx;
			background-color: #55a7ea;
		}

		.w {
			color: #999;

			.w1 {
				display: block;
				margin: 15rpx 0 0 50rpx;
			}
		}

		.apply {
			color: #55a7ea;
		}

		.audit {
			color: #55a7ea;
		}

		.finish {
			color: #55a7ea;
		}
	}

	.roleApplyInfo {
		width: 85%;
		height: 280rpx;
		margin: 20rpx auto 0;
		background-color: #FFFFFF;
		box-shadow: 0 0 2px rgba(150, 150, 150, .3);
		border-radius: 15rpx;
	}
</style>
